<template>
  <mu-flex class="scaffold" direction="column" justify-content="between">
    <mu-flex fill>
      <keep-alive>
        <router-view v-if="$route.meta.KeepAlive"/>
      </keep-alive>
      <router-view v-if="!$route.meta.KeepAlive"/>
    </mu-flex>
    <mu-flex v-if="showNav">
      <MNavigation/> <!--45px-->
    </mu-flex>

    <mu-dialog :open.sync="loginOpen" title="用户登录" width="95%" :overlay-close="false">
      <mu-flex slot="default">
        <mu-form :model="loginUser" ref="loginForm">
          <mu-form-item label="楼号" :rules="[notEmptyRule]" prop="houseNo">
            <mu-text-field v-model="loginUser.houseNo" placeholder="楼号，如：221"></mu-text-field>
          </mu-form-item>

          <mu-form-item label="房间号" :rules="[notEmptyRule]" prop="roomNo">
            <mu-text-field v-model="loginUser.roomNo" placeholder="房间号，如：127"></mu-text-field>
          </mu-form-item>

          <mu-form-item label="密码" :rules="[notEmptyRule]" prop="password">
            <mu-text-field type="password" v-model="loginUser.password" placeholder="默认：123456"></mu-text-field>
          </mu-form-item>
        </mu-form>
      </mu-flex>
      <mu-button slot="actions" flat color="pink" @click="cancelLogin">取消</mu-button>
      <mu-button slot="actions" flat color="primary" @click="toDoLogin">登录</mu-button>
    </mu-dialog>
  </mu-flex>
</template>

<script>
  import MNavigation from './components/MNavigation'
  import {mapActions, mapState, mapMutations} from 'vuex'

  export default {
    name: 'app',
    components: {
      MNavigation
    },
    data () {
      return {
        loginUser: {password: null, houseNo: null, roomNo: null},
        notEmptyRule: { validate: (val) => val!=null && val.trim().length>0, message: '必填项不能为空！'},
      }
    },
    computed: {
      ...mapState(['showNav', 'openLogin']),
      loginOpen: {
        get () {
          return this.openLogin
        },
        set (val) {
          this.updateOpenLogin(val)
        }
      }
    },
    methods: {
      ...mapActions(['initApp', 'doLogin']),
      ...mapMutations(['updateOpenLogin']),
      toDoLogin () {
        this.$refs.loginForm.validate().then(result => {
          if (result) {
            this.doLogin(this.loginUser)
          }
        })
      },
      cancelLogin () {
        this.loginOpen = false
      }
    },
    mounted () {
      this.initApp(this);
    }
  }
</script>

<style scoped>
  .scaffold {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    max-width: 100vh;
  }
</style>
